<template>
    <div class="header">
        <a alt="MissEvan" href="#" class="logo_wrap">
            <i class="logo"></i>
        </a>
        <div class="action">
            <a href="#">
            <i class="search"></i>
            </a>
            <i class="menu"></i>
            <i></i>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.header{
    z-index:600;
    width:100%;
    height:100%;
    padding:0.1rem;
    display: flex;
    justify-content: space-between;
    position:relative;
    background: #000;
    top:0;
    .logo_wrap{
    width:1.02rem;
    height: 0.2rem;
    display: inline-block;
    z-index: 600;
    .logo{
        width: 1.02rem;
        display: inline-block;
        height: 0.2rem;
        margin: 0;
        line-height: 0.2rem;
        background-image: url();
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        }
    }
}
    .action{
    width:0.84rem;
    height:0.2rem;
    display: flex;
    justify-content: space-between;
    z-index: 600;
    a{
    width:0.62rem;
    height:0.2rem;
    display: flex;
    .search{
        width:0.22rem;
        height:0.2rem;
        display: inline-block;
        margin:0 0.2rem;
        top:0;
        background-size:2.62rem 2.34rem;
        background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png");
        background-position: -2.23rem 0;
    }
    }
    .menu{
    width:0.22rem;
    height:0.2rem;
    background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png");
    background-position: -2.23rem -0.22rem;
    background-size:2.62rem 2.34rem;
    }
}
</style>